<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>调色板</title>
		<style>
			.Toolbar {
				width: 250px;
				float: left;
				font-family: "微软雅黑";
				font-size: 14px;
				text-align: center;
				background: #f2f7fe;
				border: 1px solid #8d9a8c;
				padding: 10px 15px 3px 10px;
				margin-top: 5px;
				margin-bottom: 5px;
			}
			
			img {
				padding: 5px;
				border: 1px solid #f2f7fe;
			}
			
			img:hover {
				border: 1px solid floralwhite;
				background: white;
			}
			
			.containerCanvas {
				clear: both;
			}
			
			canvas {
				border: 1px solid #7b899b;
			}
			
			button {
				padding: 6px;
				margin: 2px 2px;
				font-size: 14px;
				background: lightblue;
			}
			
			#eraser_size {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="Toolbar">
			颜色<br />
			<img id="pen_red" src="img/pen_red.gif" />
			<img id="pen_green" src="img/pen_green.gif" />
			<img id="pen_bule" src="img/pen_blue.gif" />
			<img id="pen_black" src="img/pen_black.gif"/>
		</div>

		<div class="Toolbar">
			大小<br />
			<img id="pen_thin" src="img/pen_thin.gif" />
			<img id="pen_medium" src="img/pen_medium.gif" />
			<img id="pen_thick" src="img/pen_thick.gif" />
		</div>

		<div class="Toolbar">
			橡皮大小<br />
			<img id="eraser_thin" src="img/eraser_thin.gif" />
			<img id="eraser_medium" src="img/eraser_medium.gif" />
			<img id="eraser_thick" src="img/eraser_thick.gif" />
		</div>

		<div class="Toolbar">
			状态<br />
			<img id="pen_color" src="img/pen_red.gif" />
			<img id="pen_size" src="img/pen_thin.gif" />
			<img id="eraser_size" src="img/eraser_thin.gif" />
		</div>

		<div class="containerCanvas">
			<canvas id="canvas" width="1121" height="550" style="border: 1px solid #cccccc;"></canvas>
		</div>

		<button id="clear">清除画面</button>
		<button id="save">保存画面</button>

		<script>
			window.onload = function() {

			}
		</script>
		<script>
			window.onload = function() {
				var canvas = document.getElementById("canvas");
				var cxt = canvas.getContext("2d");

				var canvasx = canvas.getBoundingClientRect().left;
				var canvasy = canvas.getBoundingClientRect().top;
				console.log(canvasx);
				console.log(canvasy);
				canvas.addEventListener("mousedown", downfun);
				canvas.addEventListener("mousemove", movefun);
				canvas.addEventListener("mouseup", upfun);

				var startx;
				var starty;
				var endx;
				var endy;
				cxt.lineWidth = 3;
				var offon = false;

				function downfun(e) {
					offon = true;
					startx = e.clientX - canvasx;
					starty = e.clientY - canvasy;
				}

				function movefun(e) {
					if(offon == true) {
						cxt.beginPath()
						endx = e.clientX - canvasx;
						endy = e.clientY - canvasy;
						cxt.moveTo(startx, starty);
						cxt.lineTo(endx, endy);
						cxt.stroke();

						startx = endx;
						starty = endy;
						console.log("1111")
					}
				}

				function upfun() {
					offon = false;
					cxt.closePath();
				}
				document.getElementById("clear").onclick = function() {
					cxt.clearRect(0, 0, canvas.width, canvas.height);
					airboard();
				}
				//画笔颜色
				
				document.getElementById("pen_red").onclick = function() {
					cxt.strokeStyle = "lightcoral";
					document.getElementById("pen_color").src = "img/pen_red.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
				}
				document.getElementById("pen_green").onclick = function() {
					cxt.strokeStyle = "aquamarine";
					document.getElementById("pen_color").src = "img/pen_green.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";					
				}
				document.getElementById("pen_bule").onclick = function() {
					cxt.strokeStyle = "aqua";
					document.getElementById("pen_color").src = "img/pen_blue.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";					
				}
				document.getElementById("pen_black").onclick = function() {
					cxt.strokeStyle = "black";
					document.getElementById("pen_color").src = "img/pen_black.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";
				}				
				//画笔大小
				document.getElementById("pen_thin").onclick = function() {
					cxt.lineWidth = 3;
					document.getElementById("pen_size").src = "img/pen_thin.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";					
				}
				document.getElementById("pen_medium").onclick = function() {
					cxt.lineWidth = 5;
					document.getElementById("pen_size").src = "img/pen_medium.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";					
				}
				document.getElementById("pen_thick").onclick = function() {
					cxt.lineWidth = 10;
					document.getElementById("pen_size").src = "img/pen_thick.gif"
					document.getElementById("eraser_size").style.display="none";
					document.getElementById("pen_color").style.display="inline";
					document.getElementById("pen_size").style.display="inline";					
				}
				//橡皮大小
				document.getElementById("eraser_thin").onclick = function() {
					cxt.strokeStyle = "white";
					document.getElementById("eraser_size").src = "img/eraser_thin.gif"
					document.getElementById("eraser_size").style.display="inline";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";
					cxt.lineWidth = 8;
				}
				document.getElementById("eraser_medium").onclick = function() {
					cxt.strokeStyle = "white";
					document.getElementById("eraser_size").src = "img/eraser_medium.gif"
					document.getElementById("eraser_size").style.display="inline";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";					
					cxt.lineWidth = 16;
				}
				document.getElementById("eraser_thick").onclick = function() {
					document.getElementById("eraser_size").src = "img/eraser_thick.gif"
					document.getElementById("eraser_size").style.display="inline";
					document.getElementById("pen_color").style.display="none";
					document.getElementById("pen_size").style.display="none";					
					cxt.lineWidth = 28;
				}
				document.getElementById("save").onclick=function(){
					var a=document.createElement("a");
					document.body.appendChild(a);
					var url=canvas.toDataURL();
					a.href=url;
					a.download="画板作品";
					a.click();
				}
			}
		</script>
	</body>

</html>